<template>
    <div class="container">
        <Navbar :title="productInfo.name" left-text="返回" left-arrow @click-left="goBack" fixed placeholder></Navbar>

        <!-- TODO swiper -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="(image, index) in productInfo.thumbs_list" :key="index">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>

        <div class="clear"></div>
        <div class="detailbox">
            <div class="title">
                <span :class="productInfo.flag_class2">{{ productInfo.flag_text }}</span>
                <h4>{{ productInfo.name }}</h4>
            </div>
            <div class="price"><em>￥</em>{{ productInfo.price }}<span>￥680</span>
                <font>库存 {{ productInfo.stock }} 件</font>
            </div>
        </div>

        <div class="clear"></div>
        <div class="allkbox"></div>
        <div class="clear"></div>
        <div class="detailbox_2">
            <p class="tit">产品参数：</p>
            <ul class="pcontent">
            </ul>
            <img v-for="(img, index) in productInfo.thumbs_list" :key="index" :src="img" />
        </div>

        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="call" />
            <van-action-bar-icon icon="cart-o" text="购物车" color="#1989fa" :to="{ path: '/cart/base/index' }" />
            <van-action-bar-icon icon="star-o" text="收藏" color="#ff5000" @click="collect" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
            <van-action-bar-button type="danger" text="立即购买" @click="popup = true" />
        </van-action-bar>


        <van-popup v-model:show="popup" round closeable close-icon="close" position="bottom" :style="{ height: '28%' }">
            <template #default>
                <div class="popup">
                    <van-card class="p_tit" :price="productInfo.price" desc="暂无过多描述" :title="productInfo.name"
                        :thumb="productInfo.cover_cdn" />

                    <van-cell>
                        <template #title>
                            <h5>数量</h5>
                        </template>
                        <template #value>
                            <van-stepper integer show-input v-model="nums" theme="round" button-size="22" />
                        </template>
                    </van-cell>

                    <van-button class="sureim" round type="primary" block
                        color="linear-gradient(to right, #ff6034, #ee0a24)" @click="imbuy">立即购买
                    </van-button>
                </div>
            </template>
        </van-popup>
    </div>
</template>

<script>
import Navbar from '../Navbar.vue'
export default {
    name: "Detail",
    data() {
        return {
            productInfo: {},
            pid: this.$route.query.id,
            nums: '',
            popup: false,
            userid: this.$cookies.get('ShopUser') ? this.$cookies.get('ShopUser').id : 0,
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        call() {
            this.$dialog.confirm({
                title: '联系客服',
                message: '联系客服热线：4008-123-123',
                theme: 'round-button',
                confirmButtonText:'立即拨打'
            }).then(() => {
                // on confirm
                window.location.href = 'tel://4008-123-123'
            });
        },
        async imbuy() {
            // this.popup = true
            // console.log(this.nums);
            let idArr = [];
            idArr.push(this.pid);
            this.$router.push({ path: '/user/order/buy', query: { action: 'imbuy', nums: this.nums, idArr } })
        },
        async addCart() {
            let proid = this.productInfo.id;

            if (this.userid <= 0) {
                this.$notify({
                    type: "warning",
                    message: '请先登录',
                    duration: 1000,
                    onClose: () => {
                        this.$router.push('/user/base/login');
                    }
                });
                return false;
            }

            let data = {
                proid,
                price: this.productInfo.price,
                userid: this.userid,
                action: 'add'
            }

            let res = await this.$api.addCart(data);

            if (res.code === 1) {
                this.$notify({
                    type: "success",
                    message: res.msg,
                    duration: 1000
                });
                return false;
            } else {
                this.$notify({
                    type: "danger",
                    message: res.msg,
                    duration: 1000,
                });
                return false;
            }
        },
        collect() { },
        async init() {
            let res = await this.$api.query({ id: this.pid });

            if (res.code === 1) {
                // this.$toast(res.msg)
                this.productInfo = res.data;
                $(".pcontent").html(this.productInfo.content)
            } else {
                // this.$router.go(-1);
                console.log(res.msg);
            }
        }
    },
    created() {
        this.init()
    },
    components: {
        Navbar,
    }
}
</script>

<style scoped>
.popup {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.p_tit {
    background-color: #fff;
}

.popup .sureim {
    max-width: 90%;
    margin: 0 auto;
    margin-top: 10px;

}

.al {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 .3125rem;
}

.title h4 {
    display: inline-block;
    margin-left: 10px;
}
</style>